<template>
  <div v-if="!$isWxAppIos()">
    <div class="c-flex-column" v-for='(item,index) in dataList' :key="index">
      <div class="c-aligni-end c-ph12 c-pv10 c-br30 swiperBg hide" :id="'DomeList'+index" :class="index==swiperListIndex?'animated show':'hide'">
        <div class="msg-box c-flex-row c-aligni-center ">
          <img class="c-ww32 c-hh32 c-brp50 imgCloseBig" :src="$addXossFilter(item.headimgurl, require('@/assets/no_login_head.png'))" alt="">
          <div class="c-ml14">
            <div class="c-fc-f2 c-fs20 c-flex-row c-aligni-center"><div class="c-text-ellipsis1 c-maxw200">{{item.nickname}}</div>已购买</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "buyInforswiper",
  props: {
    swiperList: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      cfg:JSON.parse(localStorage.getItem("cfg")),
      showList: [],
      dataList: [], //数据列表
      swiperListIndex: 0,
      theme: '',
    };
  },
  watch: {
    swiperList:{
      handler: function (val) {
        if (this.cfg.encryptUserInfo) {
          // 用户信息加密
          if (Array.isArray(val)) {
            val.forEach(item => {
               if (item.nickname) {
                let regExp = /^(.{1})(.*)/;
                if (item.nickname.codePointAt(0) > 0xffff) {
                  //遇到表情符的时候，截取两个字符
                  regExp = /^(.{2})(.*)/;
                }
                item.nickname = item.nickname.replace(regExp, '$1***');
               }
            })
          }
        }
        this.dataList = this.randSort(val);
        this.changeList();
      },
      immediate: true
    }
  },
  methods: {
    myEndFunction() {
      let that = this
      if (that.swiperListIndex == that.swiperList.length - 1) {
        that.swiperListIndex = 0
      } else {
        that.swiperListIndex = that.swiperListIndex + 1
      };
      this.changeList();
    },
    changeList() {
      let that = this
      that.$nextTick(function () {
        let DomeList = document.getElementById("DomeList" + that.swiperListIndex)
        // console.log("DomeList", DomeList)
        DomeList.addEventListener("webkitAnimationEnd", that.myEndFunction);
        DomeList.addEventListener("animationend", that.myEndFunction);
      })
    },
    randSort(arr) {
      let temp_array = arr.map(item => item);
      let result_array = [];
      while (temp_array.length) {
        let randomIndex = Math.floor(Math.random() * temp_array.length);
        result_array.push(temp_array[randomIndex]);
        temp_array.splice(randomIndex, 1);
      }
      return result_array;
    }
  },
  mounted() {
    this.swiperListIndex = 0;
  },
  deactivated() {
  },
}
</script>

<style scoped>
.msg-box {
  border-radius: 0.85rem 0px 0px 0.85rem;
  background-size: 100%;
}
@keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0.5rem, 0);
    transform: translate3d(0, 0.5rem, 0)
  }
  13% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
  65% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
  72% {
    opacity: 0;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
  100%{
    opacity: 0;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}
.animated {
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
  -webkit-animation-duration: 3.8;
  animation-duration: 3.8s;
  animation-fill-mode: forwards;
}
.ver-room-positon{
  position: fixed;
  bottom: 11rem;
  left: 0.5rem;
}
.swiperBg{
  background: rgba(0,0,0,0.70);
}
</style>
